import React, { Component } from "react";
import TabControl from "./TabControl/TabControl.jsx";
export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titles: ["流行", "新款", "精选"],
      typeIndex: 0,
    };
  }
  tabClickHandle (index) {
    this.setState({
      typeIndex: index,
    });
  }
  getItem (item) {
    if (item === "流行") {
      return <span>{item}</span>;
    } else if (item === "新款") {
      return <p>{item}</p>;
    } else if (item === "精选") {
      return <button>{item}</button>;
    }
  }
  render () {
    const { titles, typeIndex } = this.state;
    return (
      <div className="app">
        <TabControl
          titles={titles}
          tabClick={(index) => this.tabClickHandle(index)}
          // itemType={item => <button>{item}</button>}
          itemType={(item) => this.getItem(item)}
        />
        <h1>{titles[typeIndex]}</h1>
      </div>
    );
  }
}

export default App;
